HTML5

HTML 官方文档

新增标签

<header>头部</header>
<footer>底部</footer>
<nav>导航条</nav>
<aside>侧边栏</aside>
<article>引用文章</article>
<section>文档章节</section>
<input list="browwers">
<datalist id="browwers">下拉列表 自带搜索功能 必须与input标签配合 <!-- IE9以下不支持 -->
    <option value="chrome">
    <option value="firefox">
    <option value="safari">
</datalist>
<video src="" controls="controls">视屏</video>
<audio src="" controls="controls">音频</audio>

<div contenteditable="true">objk</div>  <!-- 内容可编辑 -->

<div draggable="true" class="drag" style="width: 100px; height:100px; background:red; position: absolute;"></div>  
<!-- 拖拽（火狐有问题）a / img 标签 draggable 默认为 true -->
<div class="target" style="width:200px; height:200px; border:1px solid; position:absolute; left:300px;"></div>

<script>
    // 元素拖拽事件
    let drag = document.getElementsByClassName('drag')[0];
    let target = document.getElementsByClassName('target')[0];
    let beginX, beginY;
    drag.ondragstart = (e) => {
        console.log('拖拽开始');
        beginX = e.clientX;
        beginY = e.clientY;
        e.dataTransfer.effectAllowed = 'link';  // 更改鼠标样式，兼容性极差
    };
    // drag.ondrag = () => console.log('拖拽中');
    drag.ondragend = (e) => {
        console.log('拖拽结束');
        let x = e.clientX - beginX;
        let y = e.clientY - beginY;
        drag.style.left = x + drag.offsetLeft + 'px';
        drag.style.top = y + drag.offsetTop + 'px';
    }
    target.ondragenter = () => console.log('进入');  // 鼠标进入触发
    target.ondragover = (e) => {
        console.log('移动');  // 鼠标进入触发
        e.preventDefault();  // drop 事件无法触发，需要阻止默认事件
        /* ondragover --> 回到原处 || 执行drop事件 */
    }
    target.ondragleave = () => console.log('离开');  // 鼠标进入触发
    target.ondrop = (e) => {
        e.dataTransfer.dropEffect = 'link';
        console.log('放下');
    }
</script>

<!-- 
<menu>定义命令的列表或菜单  目前所有主流浏览器都不支持
    <input type="text">1
    <input type="text">2
</menu>
-->

<!-- 废除属性：basefont/big/center/font/s/strike/tt/u -->
<!-- 不在使用 frame 框架，frameset/frame/noframes 只支持 iframe 框架 -->
<!-- 废除 applet/bgsound/blink/marquee 标签 -->
<!-- ruby 替代 rb / addr 替代 acronym / ul 替代 dir / pre 替代 listing -->